<template>
  <div id="module-root" class="g-bd4 f-cb">
    <!-- 左侧 -->
    <div class="g-mn4">
      <div class="g-mn4c">
        <div class="g-wrap6">
          <!-- 节目信息 -->
          <div class="m-info f-cb">
            <div class="cover u-cover u-cover-dj">
              <img :src="djRadio.picUrl" /><span class="msk"></span>
            </div>
            <div class="cnt">
              <div class="cntc">
                <div class="hd f-cb">
                  <i class="f-fl u-icn u-icn-93"></i>
                  <div class="tit">
                    <h2 class="f-ff2">{{ djRadio.name }}</h2>
                  </div>
                </div>
                <div class="user f-cb">
                  <a href="javascript:;" class="face"
                    ><img :src="djRadio.dj.avatarUrl"
                  /></a>
                  <span class="name"
                    ><a
                      class="s-fc7"
                      href="javascript:;"
                      :title="djRadio.dj.nickname"
                      >{{ djRadio.dj.nickname }}</a
                    ></span
                  >
                  <sup class="icn u-icn2 u-icn2-music2 "></sup>
                </div>
                <div class="btns f-cb j-flag">
                  <a
                    href="javascript:void(0)"
                    hidefocus="true"
                    class="u-btni u-btni-sub"
                    ><i
                      >订阅({{
                        djRadio.subCount > 100000
                          ? (djRadio.subCount / 10000).toFixed(1) + "万"
                          : djRadio.subCount
                      }})</i
                    ></a
                  ><a
                    href="javascript:void(0)"
                    hidefocus="true"
                    class="u-btni u-btni-playall"
                    ><i>播放全部</i></a
                  ><a href="javascript:void(0)" class="u-btni u-btni-share "
                    ><i>分享({{ djRadio.shareCount }})</i></a
                  >
                </div>
                <p class="intr f-brk">
                  <a
                    href="javascript:;"
                    @click="
                      goRoute('/find/newsradio/radiotype/', djRadio.categoryId)
                    "
                    class="cat cat u-type u-type-red"
                    >{{ djRadio.category }}</a
                  >
                  {{ djRadio.desc }}<br />
                </p>
              </div>
            </div>
          </div>
          <!-- 节目列表外层 -->
          <div class="n-songtb">
            <!-- 标题 -->
            <div class="u-title u-title-1 f-cb">
              <h3 id="programlist"><span class="f-ff2">节目列表</span></h3>
              <span class="sub s-fc4">共{{ djRadio.programCount }}期</span>
              <div class="u-sort f-fr f-cb">
                <a
                  @click="getResort(0)"
                  href="javascript:void(0)"
                  :class="['desc', asc ? '' : 'z-sel']"
                  title="降序"
                ></a>
                <a
                  @click="getResort(1)"
                  href="javascript:void(0)"
                  :class="['asc', asc ? 'z-sel' : '']"
                  class="asc "
                  title="升序"
                ></a>
              </div>
              <div class="out f-fr">
                <i class="u-icn u-icn-95"></i>
                <a class="s-fc7" href="/outchain/4/793157514/"
                  >生成外链播放器</a
                >
              </div>
            </div>
            <!-- 节目列表 -->
            <table class="m-table m-table-program">
              <tbody>
                <tr class="j-tr" v-for="pro in programs" :key="pro.id">
                  <td class="col1">
                    <div class="hd">
                      <span class="ply" title="播放"></span>
                      <span class="num">{{ pro.serialNum }}</span>
                    </div>
                  </td>
                  <td class="col2">
                    <div class="tt f-thide">
                      <a
                        href="javascript:;"
                        @click="goRoute('/find/program/', pro.id)"
                        :title="pro.name"
                        >{{ pro.name }}</a
                      >
                    </div>
                    <div class="opt hshow">
                      <a
                        class="u-icn u-icn-81 icn-add"
                        href="javascript:;"
                        title="添加到播放列表"
                        hidefocus="true"
                      ></a>
                      <span title="分享" class="icn icn-share">分享</span>
                      <span title="下载" class="icn icn-dl">下载</span>
                    </div>
                  </td>
                  <td class="col3">
                    <span class="s-fc3"
                      >播放{{
                        pro.listenerCount > 100000
                          ? parseInt(pro.listenerCount / 10000) + "万"
                          : pro.listenerCount
                      }}</span
                    >
                  </td>
                  <td class="col4">
                    <span class="s-fc3">赞{{ pro.likedCount }}</span>
                  </td>
                  <td class="col5">
                    <span class="s-fc4">{{
                      pro.createTime | timefmt("YYYY-MM-DD")
                    }}</span>
                  </td>
                  <td class="f-pr">
                    <span class="s-fc4">{{
                      pro.duration | timefmt("mm:ss")
                    }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 分页 -->
          <div
            class="u-page"
            v-if="djRadio.programCount > 100"
            @click="gopage()"
          >
            <el-pagination
              background
              layout="prev, pager, next"
              :total="djRadio.programCount / 10"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="g-sd4">
      <div class="g-wrap7">
        <RadioMaybeLike></RadioMaybeLike>
        <MultiDownLoad></MultiDownLoad>
      </div>
    </div>
  </div>
</template>
<script>
import MultiDownLoad from "@/components/MultiDownLoad";
import RadioMaybeLike from "@/components/RadioMaybeLike";

export default {
  data: () => ({
    id: 0,
    djRadio: null,
    offset: 0,
    programs: [],
    asc: false,
  }),
  created() {
    this.id = this.$route.params.id;
    this.getDjRadioDetial(this.id);
    this.getDjProgram(this.id, this.asc);
  },
  methods: {
    async getDjRadioDetial(id) {
      const {
        data: { djRadio },
      } = await this.Api.wjwApi.getDjRadioDetial(id);
      this.djRadio = djRadio;
      // console.log(djRadio);
    },
    async getDjProgram(id, asc, offset) {
      const {
        data: { programs },
      } = await this.Api.wjwApi.getDjProgram(id, asc, offset);
      this.programs = programs;
      // console.log(programs);
    },
    gopage() {
      const n = document.querySelector(".el-pagination .active").textContent;
      this.offset = (n - 1) * 100;
      this.getDjProgram(this.id, this.asc, this.offset);
      // console.log(n);
      // console.log(this.id, this.offset);
    },
    getResort(n) {
      if (n) this.asc = true;
      if (!n) this.asc = false;
      console.log(this.asc);
      this.getDjProgram(this.id, this.asc, this.offset);
    },
  },
  components: {
    MultiDownLoad,
    RadioMaybeLike,
  },
};
</script>
<style lang="less">
img,
.txt {
  border: 0;
}
html,
body,
img,
iframe {
  border: 0;
}
.g-mn4 {
  float: left;
  width: 100%;
  margin-right: -270px;
}
.g-mn4c {
  margin-right: 271px;
}
.g-wrap6 {
  padding: 47px 30px 40px 39px;
}
.n-songtb {
  margin-top: 27px;
}
.m-info .cover {
  float: left;
  position: relative;
  display: inline;
  margin: 0 -220px 0 0;
}
.u-cover-dj {
  width: 200px;
  height: 200px;
}
.u-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.u-cover .bottom,
.u-cover .msk,
.n-musicsd .lst .avatar .msk {
  background: url("../../../../assets/wjwimgs/coverall.png") no-repeat;
}
.u-cover-dj .msk {
  position: absolute;
  width: 208px;
  height: 208px;
  background-position: 0 -1285px;
  top: -4px;
  left: -4px;
}
.m-info .cnt {
  float: right;
  width: 100%;
}
.m-info .cntc {
  margin-left: 230px;
}
.m-info .hd {
  position: relative;
  margin: 0 0 12px;
  line-height: 24px;
}
.f-cb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.u-icn-93 {
  width: 55px;
  height: 24px;
  background-position: 0 -1014px;
}
.m-info .tit {
  margin-left: 64px;
  position: relative;
}
.m-info .hd h2 {
  line-height: 24px;
  font-size: 20px;
  font-weight: normal;
}
.m-info .user {
  margin: 0 0 20px;
  line-height: 35px;
}
.m-info .user .face {
  margin-right: 10px;
}
.m-info .user .face,
.m-info .user .face img {
  float: left;
  width: 35px;
  height: 35px;
}
.m-info .user .face,
.m-info .user .face img {
  float: left;
  width: 35px;
  height: 35px;
}
.m-info .user .name {
  float: left;
}
.m-info .user .u-icn2-music2 {
  float: left;
  margin: 11px 0 0 3px;
}
.u-icn2-music2 {
  width: 12px;
  height: 13px;
  background-position: -110px -190px;
}
.m-info .btns {
  margin-bottom: 25px;
  margin-right: -10px;
}
.u-btni,
.u-btni:hover {
  color: #333;
  text-decoration: none;
}
.m-info .btns2 .u-btni,
.m-info .btns .u-btni {
  margin-right: 6px;
  font-family: simsun, \5b8b\4f53;
}
.u-btni-sub {
  background-position: right -2163px;
  color: #fff;
}
.u-btni-sub i {
  background-position: 0 -2125px;
  padding-left: 30px;
}
.m-info .btns2 .u-btni,
.m-info .btns .u-btni {
  margin-right: 6px;
  font-family: simsun, \5b8b\4f53;
}
.u-btni-playall {
  background-position: right -2325px;
}
.u-btni-playall i {
  background-position: 0 -2285px;
  padding-left: 30px;
}
.m-info .intr .cat {
  margin-right: 7px;
}
.f-fr {
  float: right;
}
.u-sort .desc,
.u-sort .asc,
.u-goon .close,
.m-table-program .last {
  background: url("../../../../assets/wjwimgs/cnt_radio.png") no-repeat 0 9999px;
}
.u-sort .desc,
.u-sort .asc {
  float: left;
  height: 25px;
  width: 29px;
}
.u-sort .desc {
  background-position: 0 0;
}
.u-sort .asc {
  width: 28px;
  background-position: -40px 0;
}
.u-sort .desc.z-sel {
  background-position: 0 -30px;
  cursor: default;
}
.u-sort .asc.z-sel {
  background-position: -40px -30px;
  cursor: default;
}
.u-title .out {
  margin-right: 20px;
}
.u-title-1 .out {
  margin-top: 5px;
  float: right;
}
.m-table-program {
  border-top: none;
}
.m-table {
  width: 100%;
  border: 1px solid #d9d9d9;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.m-table-program tr {
  height: 55px;
}
.m-table th,
.m-table th .wp,
.m-table td,
.m-table .ply,
.m-table .mv,
.m-table .icn,
.m-info .edit {
  background: url("../../../../assets/wjwimgs/table.png") no-repeat 0 9999px;
}

.m-table td {
  padding: 6px 10px;
  line-height: 18px;
  text-align: left;
}
.m-table-program .col1 {
  width: 62px;
}
.m-table-program td {
  padding: 0 10px;
}
.m-table .hd {
  height: 18px;
}
.m-table .ply {
  width: 17px;
  height: 17px;
  cursor: pointer;
  background-position: 0 -103px;
}
.m-table .hd .ply {
  float: right;
}
.m-table .hd .num {
  width: 25px;
  margin-left: 5px;
  color: #999;
}
.m-table-program .hd .num {
  margin-left: 10px;
}
.m-table-program .col2 {
  width: 230px;
  padding-left: 0;
}
.m-table-program .tt {
  margin-right: -100px;
}
.m-table .tt {
  float: left;
  width: 100%;
}
.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.m-table-program .opt {
  float: right;
  display: none;
}
tr:hover .col2 .opt {
  display: block;
}
.m-table tr:nth-child(2n) td {
  background-color: #f7f7f7;
}
.m-table tr.j-tr:hover {
  background-color: #eee;
}
.u-icn-81 {
  width: 13px;
  height: 13px;
  background-position: 0 -700px;
}
.u-icn-81:hover {
  background-position: -22px -700px;
}
.m-table .u-icn-81 {
  float: left;
  margin-top: 2px;
}
.m-table .icn-share {
  background-position: 0 -195px;
}
.m-table .icn-share:hover {
  background-position: -20px -195px;
}
.m-table .mv,
.m-table .icn {
  float: left;
  width: 18px;
  height: 16px;
  margin: 2px 0 0 4px;
  overflow: hidden;
  text-indent: -999px;
  cursor: pointer;
}
.m-table .icn-dl {
  background-position: -81px -174px;
}
.m-table .icn-dl:hover {
  background-position: -104px -174px;
}
.m-table-program .col3 {
  width: 60px;
}
.m-table-program .col4 {
  width: 70px;
}
.m-table-program .col5 {
  width: 66px;
}
.m-table-program .last {
  position: absolute;
  top: 0;
  left: 19px;
  width: 12px;
  height: 16px;
  background-position: 0 -100px;
}
.el-pager li.active {
  color: #c20c0c;
  cursor: default;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #c20c0c;
  color: #fff;
}
</style>
